import React, { Component, PropTypes } from 'react';
import { Text, StyleSheet, View, TouchableOpacity, Alert, Platform, NativeModules, BackAndroid, Switch } from 'react-native';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import Dimensions from 'Dimensions';
import { Icon } from '../components/common/icon'
import getIcon from '../components/common/icon/iconFontMap'
import BoxShadowYaGuan from '../components/common/BoxShadowYaGuan';

const width = Dimensions.get('window').width;
// 一些常量设置
const cols = 4;
const cellWH = (width / 4) -15 ;
const vMargin = (width - cellWH * cols) / (cols + 1);
const hMargin = 25;
const EntityLabels = require('../constants/entities');

class YaguanRoomScenceListCell extends Component {

    // 构造
    constructor(props) {
        super(props);
    }

    /**
     * 调用数据 :
     *      1. 当触发Action方法请求数据反馈到Reducer中
     *      2. Reducer通过ActionType判断该更新哪个UI中的State
     *      3. 最后刷新界面显示数据
     */
    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', () => this.onBackAndroid());
        }
    }

    componentDidMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', () => this.onBackAndroid());
        }
    }

    /**
     * 监听Android返回按键
     * @returns {boolean}
     */
    onBackAndroid() {
        const {navigator} = this.props;
        if (navigator.getCurrentRoutes().length > 1) {
            navigator.pop();
            return true;
        }
        //退出
        return false;
    }
    render() {
        const { scenes } = this.props;
        const { name } = scenes || {};
        let icon = getIcon(name)
        console.warn(icon)
        return (
          <TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('bb')}}>
            <View style={{marginLeft: vMargin, marginBottom: hMargin,}}>
              <BoxShadowYaGuan
                width={cellWH}
                height={cellWH}
                renderItem={()=>{
                  return (
                    <View style={styles.innerViewStyle}>
                      <Icon name={icon.name} size={40} color={icon.color} />
                      <Text style={styles.scenceName}>{name}</Text>
                    </View>
                  )
                }}
              />
            </View>
          </TouchableOpacity>
        );

    }
}

const styles = StyleSheet.create({
	innerViewStyle:{
		width:cellWH,
		height:cellWH ,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#fff',
		borderRadius: 12,
  },
  scenceName: {
    color: '#333333',
    fontSize: 11
  }
});


function mapDispatchToProps(dispatch) {
    const actions = {
    };
    return bindActionCreators(actions, dispatch);
}

function mappingStateToProps(state, ownProps) {
		const { scenceId } = ownProps;
		const entities= state['entities'];
		const scenesEntities = entities[EntityLabels.scenes];
		const scenes = scenesEntities[scenceId];

		return {
			scenes
		}
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(YaguanRoomScenceListCell);
